section.col-xs-12.content(ng-controller="ExchangeCtrl")

  //- Disconnected

  group.disconnected(ng-hide="connected")
    p.literal(l10n) You have to be online to see this screen

  group.disconnected(ng-hide="!connected || loadState.account")
    div(id="section_loader")
      img(src="img/sections.png", class="loader")
      div(class="loading_sections", l10n) Loading... 

  div(ng-show="!loadingAccount && !account.Balance && loadState.account && connected")
    include ../tabs/banner/unfunded
    p.literal(l10n="err-you-must-be-funded-before-you-can-exchange-money") You have to be funded before you can submit an order.

  div(ng-show='hasRTJapanTrust')
    include banner/rtjapan
  div(ng-show='hasRTJapanTrustWithRippling')
    include banner/rtjapanrippling

  div(ng-show='debug') This page is not available in debug mode

  //- Connected

  .row(ng-show='connected && !debug && account.Balance')
    .widgets.hidden-xs.col-sm-4.col-md-4.col-lg-3
      include ../tabs/widgets/balances
    .col-xs-12.col-sm-8.col-md-8.col-lg-9
      .nameLine(l10n) Buy (Market Order)
      .instructions(l10n) Submit a buy order at the current market rate. Orders will execute instantly.
      form.mode-form#exchangeForm(name="exchangeForm", ng-show='mode=="form"', ng-submit='exchange_prepared()')
        .form-group
          label(for='amount', l10n="Receive (amount)") I want to buy
          .row.row-padding-small.amount
            .col-sm-3.col-md-3.col-xs-3
              input.value.form-control#amount(
              name='amount', type='text'
              ng-model='exchange.amount'
              required
              rp-autofill='$routeParams.amount'
              rp-autofill-amount
              rp-amount
              rp-amount-positive
              rp-amount-xrp-limit
              rp-amount-currency='{{exchange.currency_name}}'
              rp-max-digits)
            .col-sm-6.col-md-4.col-xs-9
              input.currency.form-control#amount_currency(
              name='amount_currency', type='text'
              rp-combobox="currency_choices", rp-combobox-select
              ng-model='exchange.currency_name'
              rp-autofill='$routeParams.amount'
              rp-autofill-currency)
            .col-sm-3.col-md-3.col-xs-12.pull-left
              button.btn.btn-cancel.btn-block(ng-click="gotoFund()", l10n)
                | add gateway
          .errorGroup(ng-messages='exchangeForm.amount.$dirty && exchangeForm.amount.$error')
            .error(ng-message='required', l10n) Please enter an amount.
            .error(ng-message='rpAmount', l10n) Not a valid amount.
            .error(ng-message='rpAmountXrpLimit', l10n)
              | You are either trying to buy too little or too much XRP.
              | Minimum amount is 0.000001 XRP and maximum amount is 100 billion XRP.
            .error(ng-message='rpMaxDigits', l10n) Your amount has too many digits. The max number of digits is 16.
            .error(ng-message='rpAmountPositive', l10n)
              | Please enter an amount greater than zero.
          p.literal(ng-show="exchange.path_status == 'waiting'")
          p.literal(ng-show="exchange.path_status == 'pending'", l10n)
            img(src="img/button-s.png", class="loader")
            |  Calculating...
          //- TODO how high trust?
          p.literal(ng-show="exchange.path_status == 'no-path' && exchange.currency_code != 'XRP'", l10n)
            | Cannot buy {{exchange.amount}} {{exchange.currency_name}}. Please make sure your account has enough funds, and a&#32;
            a(href="https://ripple.com/knowledge_center/how-to-connect-to-a-gateway-2/", target="_blank") connection
            | &#32;to a {{exchange.currency_name}} gateway.
          p.literal(ng-show="exchange.path_status == 'no-path' && exchange.currency_code == 'XRP'", l10n)
            | Sorry! Cannot buy {{exchange.amount}} {{exchange.currency_name}}. Please make sure your account has enough funds.
          p.literal(ng-show="exchange.path_status == 'error'", l10n) Error while calculating price.

        .currency_sets
          .row.row-padding-small(ng-if="exchange.path_status == 'done'")
            .col-xs-12(l10n) Sell
          .row.row-padding-small.alternatives
            .col-xs-12.col-sm-6.col-md-4(ng-repeat="alt in exchange.alternatives")
              .am
                .amnt {{alt.amount | rpamount:{rel_precision: 7} }}
                span.currency  {{alt.amount | rpcurrency }}
                span(ng-hide="alt.amount.is_native() || alt.amount.issuer().to_json() == account.Account")
                  |.
                  span.issuer(
                    rp-pretty-issuer="alt.amount.issuer().to_json()"
                    rp-pretty-issuer-contacts="userBlob.data.contacts"
                    rp-pretty-issuer-or-short)
                .ex (
                  span.rate {{alt.rate | rpamount:{rel_precision: 4} }}
                  span.pair {{alt.amount | rpcurrency}}/{{exchange.currency_code}}
                  | )
              button.btn.btn-block.btn-success(type="submit", ng-disabled='exchangeForm.$invalid', ng-click="exchange.alt = alt", l10n)
                | Sell {{ alt.amount | rpcurrency }}
                span(ng-hide="alt.amount.is_native() || alt.amount.issuer().to_json() == account.Account")  (
                  span.issuer(
                    rp-pretty-issuer="alt.amount.issuer().to_json()"
                    rp-pretty-issuer-contacts="userBlob.data.contacts"
                    rp-pretty-issuer-or-short)
                  | )
          .row.pathupdate(ng-show="exchange.alternatives.length && lastUpdate")
            .col-xs-12(l10n) Price last updated&#32;
              span(ng-bind='lastUpdate')
              span(ng-show="lastUpdate > '1'", l10n-inc)  seconds
              span(ng-show="lastUpdate == '1'", l10n-inc)  second
              |  ago

      //- N2. Waiting for path

      group.mode-wait-path(ng-show='mode=="wait_path" && account.Balance')
        p.literal
          img(src="img/button-s.png", class="loader")
          span(class="loading_text", l10n) Ripple is calculating the price for your order.

      //- N3. Confirmation page

      group.mode-confirm(ng-show='mode=="confirm" && account.Balance')
        span(l10n)
          p.literal(l10n-inc) You are selling
          p.amount_feedback
            span.value {{exchange.alt.amount | rpamount}} &#32;
            span.currency {{exchange.alt.amount | rpcurrency}}
          p.literal(l10n-inc) for
          p.amount_feedback(rp-pretty-amount='exchange.amount_feedback')
          p.literal(l10n-inc) You will sell at most
          p.amount_feedback
            span.value {{exchange.alt.amount | rpamount}} &#32;
            span.currency {{exchange.alt.amount | rpcurrency}} &#32;
            span &plus; {{exchangeMaxDeviation}}%
          p
            span.literal(l10n-inc) Exchange rate: &#32;
            span.value {{exchange.alt.rate | rpamount:{rel_precision: 4} }} &#32;
            span.currency {{exchange.alt.amount | rpcurrency}} per {{exchange.currency_code}}
          span.literal(l10n-inc) Ripple network fee: &#32;
          span.currency(rp-pretty-amount='networkFee')
          form.call-to-action(ng-submit='exchange_confirmed()')
            p.literal(l10n-inc) Are you sure? Ripple network transactions cannot be undone.
            .row.row-padding-small
              .col-xs-6.col-sm-4.col-md-3.col-lg-2
                button.btn.btn-block.btn-success.submit(type='submit'
                ng-disabled='confirm_wait', l10n) Confirm
              .col-xs-6.col-sm-4.col-md-3.col-lg-2
                button.btn.btn-link.btn-default.back(ng-click='cancelConfirm()', l10n) cancel


      //- N4. Waiting for transaction result page

      group.mode-sending(ng-show='mode=="sending" && account.Balance')
        include ../messages/sendconvert/waiting
        hr
        //- p: button.btn.btn-default(ng-click='reset()', l10n) Stop waiting

      //- N5a. Error page
      group.mode-error(ng-show='mode=="error" && account.Balance')
        include ../messages/sendconvert/localerror
        p: button.btn.btn-link.btn-default(ng-click='cancelConfirm()', l10n) cancel

      //- N5b. Ripple error page
      group.mode-ripplerror(ng-show='mode=="rippleerror" && account.Balance')
        rp-transaction-status(
          rp-engine-result="{{engine_result}}"
          rp-engine-result-message="{{engine_result_message}}"
          rp-accepted="{{engine_status_accepted}}"
          rp-current-tab="send_convert")

      //- N6. Confirmed page 

      group.mode-status(ng-show='mode=="status" && account.Balance')
        include ../messages/sendconvert/confirmation
        group.actions
          hr
          div(class="actionLink")
            a(href="", ng-click="reset()", l10n) Submit another buy order 
          div(class="actionLink")
            a(href="", ng-click="reset_goto('balance')", l10n) Back to balance
          hr
